<template>
	<view class="container">
		<view class="title-tab">
			<view class="hot" @click="setActive(1)">
				<view class="title" :class="{'active':status == 1}">待付款</view>
				<view class="underline" :class="{'active':status == 1}"></view>
			</view>
			<view class="new" @click="setActive(2)">
				<view class="title" :class="{'active':status == 2}">待发货</view>
				<view class="underline" :class="{'active':status == 2}"></view>
			</view>
			<view class="new" @click="setActive(3)">
				<view class="title" :class="{'active':status == 3}">待收货</view>
				<view class="underline" :class="{'active':status == 3}"></view>
			</view>
			<view class="new" @click="setActive(5)">
				<view class="title" :class="{'active':status == 5}">已完成</view>
				<view class="underline" :class="{'active':status == 5}"></view>
			</view>
			<view class="new" @click="setActive(9)">
				<view class="title" :class="{'active':status == 9}">已关闭</view>
				<view class="underline" :class="{'active':status == 9}"></view>
			</view>
		</view>
		<!-- 待付款 -->
		<view>
			<view class="img-box-order" v-if="noOrder">
				<image lazy-load="true"  class="no-order" src="../../static/images/noorder.png" mode="widthFix"></image>
			</view>
			<view class="item-box" v-for="(item,key) in order_list" :key="key">
				<view class="item-title">
					<view class="shop-ico"><image lazy-load="true"  src="../../static/images/shop-ico.png" class="shop-ico"></image></view>
					<view class="shop-name">{{item.goods_list[0].store_name}}</view>
				</view>
				<view class="order-time">
					<view class="">订单号：{{item.order_no}}</view>
					<view class=""> {{ utils.timeTodate('Y-m-d', item.create_time*1000) }}</view>
				</view>
				<view class="item" @click="goOrderDetail(item.id)">
					<view class="item-info">
						<view class="item-img">
							<image lazy-load="true"  :src="item.goods_list[0].sku_thumbnail" class="item-img"></image>
						</view>
						<view class="item-text">
							<view class="title">{{item.goods_list[0].sku_name}}</view>
							<view class="type">
								<view class="size">{{item.goods_list[0].sku_spec}}</view>
							</view>
							<view class="price-amount">
								<view class="price">￥{{item.real_payments}}</view>
								<view class="goods-num">
									(共{{item.goods_list[0].count}}件商品)
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="go-pay" v-if="status==1">
					<image lazy-load="true"  src="../../static/images/paypay.png" @click="payMoney(item.pay_param,item.pay_platform,item.goods_list[0].store_sku_id)" class="pay-img"></image>
				</view>
				<view class="item-bot" v-if="status==3">
					<view class="remarks">商家备注：{{item.b_remark || '无'}} </view>
					<view class="logistics">
						<view class="log-list">
							<view class="log-text">
								<view class="log-tit">物流：</view>
								<view class="log-msg">{{item.delivery_info.expName}}</view>
							</view>
							
						</view>
						<view class="show-next" v-if="!hideLog" @click="show_hide_log">
							<view class="">展开</view>
							<image lazy-load="true"  src="../../static/images/show-bot.png" class="show-bot"></image>
						</view>
						<view v-if="hideLog">
							<view class="log-list"  v-for="(item1,key1) in item.delivery_info.list" :key="key1">
								<view class="log-text" style="margin-top: 20upx;">
									<view class="log-tit"></view>
									<view class="log-msg">
										<view class="">{{item1.time}}</view>
										<view class="">{{item1.status}}</view>
									</view>
								</view>
							</view>
						</view>
						<view class="log-list t-right" v-if="hideLog" @click="show_hide_log">
							<view class="show-next">
								<view class="">收拢</view>
								<image lazy-load="true"  src="../../static/images/hide-log.png" class="show-bot"></image>
							</view>
						</view>
					</view>
					<view class="btn-box">
						<image lazy-load="true"  src="../../static/images/sure-take.png" @click="receipt(item.id)" class="sure-img"></image>
					</view>
				</view>
				<view class="go-pay" v-if="status==5">
					<image lazy-load="true"  src="../../static/images/share-img-1.png" @click="goPost" class="share-img"></image>
				</view>
				<view class="go-pay" v-if="status==9">
					<image lazy-load="true"  src="../../static/images/pay-again.png" @click="goAgain(item.goods_list[0].store_sku_id)" class="pay-img"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import utils from '@/components/shoyu-date/utils.filter.js';
	export default {
		data() {
			return {
				titleTabNum:'1',
				"checked":true,
				"checkAllSta":false,
				hideLog:false,
				status:1,
				ts:0,
				per:10000,
				utils: utils,
				timestamp: '',
				order_list:[],
				noOrder:false
			}
		},
		onLoad(e) {
			this.status= e.id || 1;
			this.getOrder();
			// #ifdef H5
			let share_time_line={
				title:self.$request.h5_share_name, // 分享标题
				link: self.$request.h5_share_url+'?page=index', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: self.$request.h5_img_url+'/static/images/logo.png', // 分享图标
			}
			let share_app_message={
				title: self.$request.h5_share_name, // 分享标题
				desc: '我发现了一个很不错的商城，买家具有超大实惠！', // 分享描述
				link: self.$request.h5_share_url+'?page=index', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: self.$request.h5_img_url+'/static/images/logo.png', // 分享图标
			}
			uni.setStorageSync('share_time_line',share_time_line);
			uni.setStorageSync('share_app_message',share_app_message);
			self.$request.wx_config()
			
			// #endif
		},
		onShareAppMessage(res) {
		    if (res.from === 'button') {
		      console.log(res.target)
		    }
		    return {
		      title: this.$request.share_title,
		      path: '/pages/index/index'
		    }
		  },
		methods: {
			setActive(num){
				this.status = num;
				this.getOrder();
			},
			checkImg(){
				this.checked = !this.checked
			},
			checkAll(){
				this.checkAllSta = !this.checkAllSta
			},
			show_hide_log(){
				this.hideLog = !this.hideLog
			},
			receipt(id){
				var self = this;
				uni.showModal({
				    title: '确认收到货了吗？',
				    content: '为保障您的权益，请收到货确认无误后，再确认收货哦~',
					confirmText:'确认收货',
				    success: function (res) {
				        if (res.confirm) {
				            self.$request.request({
				            	url:'/order/receipt',
				            	data:{
				            		order_id:id
				            	},
				            	success:function(res){
				            		console.log(res)
				            		if(res.code==200){
				            			uni.showToast({
				            			    title: '确认收货成功！',
				            			    duration: 2000
				            			});
				            			setTimeout(function() {
				            				uni.redirectTo({
				            				    url: '../my-order/my-order?id=5'
				            				});
				            			}, 2000);
				            			
				            		}else{
				            			
				            		}
				            	}
				            })
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			payMoney(param,where,sku_id){
				var self = this;
				// #ifdef MP-WEIXIN
				if(where==2){
					uni.showModal({
					    title: '温馨提示',
					    content: '【H5网页】订单暂无法支付，你可以重新下单或回原平台支付！',
						showCancel:true,
						confirmText:'重新下单',
						cancelText:'取消',
						confirmColor:'#00c200',
					    success: function (res) {
					        if (res.confirm) {
					            self.goAgain(sku_id)
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
					});
					return false;
				}
				// #endif
				
				// #ifdef H5
				if(where==1){
					uni.showModal({
					    title: '温馨提示',
					    content: '【小程序】订单暂无法支付，你可以重新下单或回原平台支付！',
						showCancel:true,
						confirmText:'重新下单',
						cancelText:'取消',
						confirmColor:'#00c200',
					    success: function (res) {
					        if (res.confirm) {
					            self.goAgain(sku_id)
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
					});
					return false;
				}
				
				self.wx.chooseWXPay({
				  timestamp: param.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
				  nonceStr: param.nonceStr, // 支付签名随机串，不长于 32 位
				  package: param.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
				  signType: param.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
				  paySign:param.paySign, // 支付签名
				  success: function (res) {
				    uni.showToast({
				        title: '支付成功！',
				        duration: 2000
				    });
				    setTimeout(function() {
				    	uni.redirectTo({
				    	    url: '../my-order/my-order?id=2'
				    	});
				    }, 2000);
				  },
				  fail:function () {
				  	uni.showToast({
				  	    title: '支付失败，请稍后重试',
				  		icon: 'none',
				  	    duration: 2000
				  	});
				  	setTimeout(function() {
				  		uni.redirectTo({
				  		    url: '../my-order/my-order?id=1'
				  		});
				  	}, 2000);
				  }
				});
				// #endif
				
				// #ifdef MP-WEIXIN
				uni.requestPayment({
					timeStamp:param.timeStamp,
					nonceStr:param.nonceStr,
					package:param.package,
					signType:param.signType,
					paySign:param.paySign,
					success:function () {
						uni.showToast({
						    title: '支付成功！',
						    duration: 2000
						});
						setTimeout(function() {
							uni.redirectTo({
							    url: '../my-order/my-order?id=2'
							});
						}, 2000);
					},
					fail:function () {
						uni.showToast({
						    title: '支付失败，请稍后重试',
							icon: 'none',
						    duration: 2000
						});
						setTimeout(function() {
							uni.redirectTo({
							    url: '../my-order/my-order?id=1'
							});
						}, 2000);
					}
						
				})
				// #endif
				
			},
			goAgain(id){
				uni.redirectTo({
				    url: '../shopping-cart/shopping-cart?id='+id
				});
			},
			goPost(){
				uni.redirectTo({
				    url: '../post/post'
				});
			},
			goOrderDetail(id){
				uni.redirectTo({
				    url: '../order-details/order-details?id='+id
				});
			},
			getOrder(){
				var self = this;
				this.$request.request({
					url:'/order/list',
					data:{
						status:this.status,
						ts:this.ts,
						per:this.per
					},
					success:function(res){
						console.log(res)
						if(res.code==200){
							var x = res.result;
							x.forEach((item,index)=>{
								x[index].create_time = new Date(item.create_time).getTime();
								x[index].real_payments = self.$money(item.real_payments);
								
								x[index].goods_list.forEach((val,key)=>{
									x[index].goods_list[key].sku_thumbnail = self.$http_img(val.sku_thumbnail)
								})
							});
							
							self.order_list = x;
							
							if(self.order_list.length<1){
								self.noOrder = true
							}else{
								self.noOrder = false
							}
							
							
						}else{
							
						}
					}
				})
			}
		}
	}
</script>

<style>
	@import url("my-order.css");
</style>
